<template>
  <view v-if="shenheStatus == 0">
    <view class="password-card">
      <view class="item">
        <view>{{ $t("user.cardAcc") }}</view>
        <view class="text flex-y-center">
          <text class="yuan"></text>
          <text>{{ cardData.card_info.user }}</text>
          <text @click="copy(cardData.card_info.user)" class="copy">{{
            $t("person.copy")
          }}</text>
        </view>
      </view>
      <view class="item">
        <view>{{ $t("user.cardPass") }}</view>
        <view class="text flex-y-center">
          <text class="yuan"></text>
          <text>{{ cardData.card_info.password }}</text>
          <text @click="copy(cardData.card_info.password)" class="copy">{{
            $t("person.copy")
          }}</text>
        </view>
      </view>
      <template v-if="getForm.list.length">
        <view class="item" v-for="(item, index) of getForm.list" :key="index">
          <view>{{ item.name }}</view>
          <view class="text flex-y-center">
            <text class="yuan"></text>
            <text>{{ item.default }}</text>
            <text @click="copy(item.default)" class="copy">{{
              $t("person.copy")
            }}</text>
          </view>
        </view>
      </template>
    </view>

    <view v-if="0" class="change-pass">
      <view style="margin: 24rpx">{{
        $t("common.edit") + $t("user.cardPass")
      }}</view>
      <view class="form-section">
        <u-form
          :model="form"
          ref="uForm"
          labelAlign="center"
          :borderBottom="true"
          label-width="160rpx"
        >
          <u-form-item>
            <u-input
              v-model="form.cardpwd"
              :placeholder="$t('user.noCardPass')"
            />
          </u-form-item>
        </u-form>
      </view>

      <view class="submit-bt" @click="onSubmit">{{
        $t("common.edit") + $t("user.cardPass")
      }}</view>
    </view>
  </view>

  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      cardData: null,
      card_id: "",
      form: {
        sale_id: 0,
        cardpwd: ""
      }
    };
  },
  computed: {
    getForm() {
      try {
        return JSON.parse(this.cardData.card_info.form);
      } catch (error) {
        return {
          list: [],
          name: ""
        };
      }
    }
  },
  onLoad(params) {
    this.card_id = params?.id;
    this.form.sale_id = this.card_id;
    this.getCardDetail();
  },
  methods: {
    copy(value) {
      uni.setClipboardData({
        data: value,
        success: () => {
          uni.showToast({
            title: this.$t("admin.copySuc"),
            icon: "none",
            duration: 2000
          });
        }
      });
    },
    async getCardDetail() {
      const res = await this.$allrequest.coupon.verifyDetail(
        {
          sale_id: this.card_id
        },
        true
      );
      this.cardData = res.data.list;
    },
    async onSubmit() {
      try {
        if (!this.form.cardpwd.length) throw this.$t("user.noPass");
        this.$allrequest.coupon.changePass(this.form).then((res) => {
          this.$utils.toast(res.msg);
          if (res.code == 0) {
            this.getCardDetail();
          }
        });
      } catch (error) {
        this.$utils.toast(error || error.msg);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.change-pass {
  margin-top: 24rpx;
  border-top: 1px solid #f1f1f1;
  width: 100%;
  background: #f2f2f2;
  min-height: 100vh;
  .form-section {
    width: 100%;
    background-color: #ffffff;
    padding-left: 24rpx;
    /deep/.u-form-item {
      padding: 18rpx 0 !important;
      .u-form-item--left__content__label {
        justify-content: flex-start !important;
      }
    }
  }
}
.submit-bt {
  margin: 80rpx auto 0;
  width: 90.4vw;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #f0250e;
  border-radius: 120rpx;
  font-size: 32rpx;
  color: #ffffff;
}
.password-card {
  padding: 0 24rpx;
  .item {
    margin-top: 38rpx;
    > view:nth-child(1) {
      line-height: 40rpx;
      font-size: 28rpx;
    }
    .text {
      margin-top: 20rpx;
      .yuan {
        margin-right: 15rpx;
        width: 8rpx;
        height: 8rpx;
        background: #8c8c8c;
        border-radius: 50%;
        opacity: 1;
      }
      > text:nth-child(2) {
        color: #8c8c8c;
      }
      .copy {
        margin-left: 44rpx;
        width: 68rpx;
        line-height: 34rpx;
        text-align: center;

        background: #f2f2f2;
        border-radius: 120rpx;

        font-size: 22rpx;
      }
    }
  }
}
</style>
